<cfoutput>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, ##map-canvas {
        margin: 0;
        padding: 0;
        width:100%;
        height:300px;
      }
    </style>
    <script>

		var map;
		function initialize() {
		  var mapOptions = {
		    zoom: 3,
		    center: new google.maps.LatLng(43, -98),
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'),
		      mapOptions);
          <cfloop query="rc.data.data" startrow="1" endrow="#(rc.data.data.recordCount gt 10)?10:rc.data.data.recordcount#">
            <cfif rc.data.data.begin_lat neq "" and rc.data.data.begin_lon neq "">
                var marker = new google.maps.Marker({position: new google.maps.LatLng(#rc.data.data.begin_lat#, #rc.data.data.begin_lon#), map: map }); 
            <cfelseif rc.data.data.state_abbr neq '' and rc.data.data.state_abbr neq 'XX'>
                var marker = new google.maps.Marker({position: new google.maps.LatLng(#rc.data.coordinates[rc.data.data.state_abbr].lat#, #rc.data.coordinates[rc.data.data.state_abbr].lon#), map: map });
            </cfif>
          </cfloop>
		}
		initialize();

    </script>

    </head>


    <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false" >
            <h3>
                Wildfire Data Map
            </h3>
            
            <div style="width:100%;text-align:center;">
            	<div id="map-canvas"></div>
            </div>


        </div>
    </div>

</cfoutput>